<template>
    <div>
        <!-- 查询条件开始 -->
        <el-form ref="search" :model="search" :inline="true" label-width="68px">
            <el-form-item label="字典类型" prop="dictType">
                <el-select
                        v-model="search.dictType"
                        placeholder="请选择字典类型"
                        clearable
                        size="small"
                        style="width:240px">
                    <el-option
                            v-for="dict in typeOptions"
                            :key="dict.dictType"
                            :label="dict.dictName"
                            :value="dict.dictType"/>
                </el-select>
            </el-form-item>
            <el-form-item label="字典标签" prop="dictLabel">
                <el-input
                        v-model="search.dictLabel"
                        placeholder="请输入字典标签"
                        clearable
                        size="small"
                        style="width:240px"/>
            </el-form-item>
            <el-form-item label="状态" prop="status">
                <el-select
                        v-model="search.status"
                        placeholder="字典状态"
                        clearable
                        size="small"
                        style="width:240px">
                    <el-option
                            v-for="dict in statusOptions"
                            :key="dict.dictValue"
                            :label="dict.dictLabel"
                            :value="dict.dictValue"/>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="searchdata">搜索</el-button>
                <el-button type="primary" icon="el-icon-refresh" size="mini" @click="clearsearch">重置</el-button>
            </el-form-item>
        </el-form>
        <!-- 查询条件结束 -->
        <!-- 表头按钮开始 -->
        <el-row :gutter="10" style="margin-bottom: 8px;">
            <el-col :span="1.5">
                <el-button type="primary" icon="el-icon-plus" size="mini" @click="addDictData">新增</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="danger" icon="el-icon-delete" :disabled="multiple" size="mini" @click="handleDelete">批量删除</el-button>
            </el-col>

        </el-row>
        <!-- 表头按钮结束 -->

        <!-- 数据表格开始 -->
        <el-table border :data="dictDataTableList" @selection-change="handleSelectionChnage">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="字典编码" prop="dictCode" align="center" />
            <el-table-column label="字典标签" prop="dictLabel" align="center" />
            <el-table-column label="字典键值" prop="dictValue" align="center" />
            <el-table-column label="字典排序" prop="dictSort" align="center" />
            <el-table-column label="状态" prop="status" align="center" :formatter="statusFormatter" />
            <el-table-column label="备注" prop="remark" align="center" :show-overflow-tooltip="true" />
            <el-table-column label="创建时间" prop="createTime" align="center" width="180" />
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button type="text" icon="el-icon-edit" size="mini" @click="handleUpdate(scope.row)">修改</el-button>
                    <el-button type="text" icon="el-icon-delete" size="mini" @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 数据表格结束 -->
        <!-- 分页组件开始 -->
        <el-pagination
                v-show="page.total>0"
                :current-page="page.current"
                :page-sizes="[5, 10, 20, 30]"
                :page-size="page.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page.total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
        />
        <!-- 分页组件结束 -->

        <!-- 添加和修改的弹出层开始 -->
        <el-dialog
                :title="title"
                :visible.sync="open"
                width="500px"
                center
                append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                <el-form-item label="字典类型" prop="dictType">
                    <el-input v-model="form.dictType" :disabled="true" size="small" />
                </el-form-item>
                <el-form-item label="数据标签" prop="dictLabel">
                    <el-input v-model="form.dictLabel" placeholder="请输入数据标签" clearable size="small" />
                </el-form-item>
                <el-form-item label="数据键值" prop="dictValue">
                    <el-input v-model="form.dictValue" placeholder="请输入数据键值" clearable size="small" />
                </el-form-item>
                <el-form-item label="排序显示" prop="dictSort">
                    <el-input-number v-model="form.dictSort" placeholder="请输入数据键值" clearable size="small" :min="0" />
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <el-radio-group v-model="form.status">
                        <el-radio
                                v-for="dict in statusOptions"
                                :key="dict.dictValue"
                                :label="dict.dictValue"
                                :value="dict.dictValue"
                        >{{ dict.dictLabel }}</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                    <el-input v-model="form.remark" type="textarea" placeholder="请输入字典备注" clearable size="small" />
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </span>
        </el-dialog>
        <!-- 添加和修改的弹出层结束 -->

    </div>
</template>

<script>
    export default {
        data(){
            return{
                //条件查询
                search:{},
                //类型数据字典
                typeOptions:[],
                //状态数据字典
                statusOptions:[],
                //表单数据
                dictDataTableList:[],
                // 默认查询的类型
                defaultDictType: undefined,
                // 非多个禁用
                multiple:true,
                // 选中数组
                ids: [],
                //分页
                page:{
                    current:1,
                    size:5,
                    total:10
                },
                //标题
                title:'',
                //弹出层
                open:false,
                //表单
                form:{},
                // 表单校验
                rules: {
                    dictLabel: [
                        { required: true, message: '数据标签不能为空', trigger: 'blur' }
                    ],
                    dictValue: [
                        { required: true, message: '数据键值不能为空', trigger: 'blur' }
                    ]
                }
            }
        },
        methods:{

            //条件查询
            searchdata(){
                this.page.current=1;
                this.getDictTypeData();
            },
            //条件清空
            clearsearch(){
                this.search={};
            },
            //删除
            handleDelete(row) {
                const dictCodes = row.dictCode || this.ids
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios.delete("system/api/dict/data/delDictData/" + dictCodes).then(r => {
                        if (r.data.t){
                            this.$message.success(r.data.msg);
                        }else {
                            this.$message.error("操作失败");
                        }
                        this.getDictTypeData();
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //添加
            addDictData(){
                if (this.$refs.form != undefined) {
                    this.$refs.form.clearValidate();
                }
                this.title="添加字典数据信息";
                this.form={dictType:this.defaultDictType,dictSort:'0',status:'0'};
                this.open=true;
            },
            //修改
            handleUpdate(row){
                if (this.$refs.form != undefined) {
                    this.$refs.form.clearValidate();
                }
                this.title="修改字典数据信息";
                this.form =JSON.parse(JSON.stringify(row));
                this.form.dictCode=row.dictCode;
                this.open=true;

            },
            //提交表单
            handleSubmit(){
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        this.$axios.post("system/api/dict/data/saveOrUpdDictData",this.form).then(r=>{
                            if (r.data.t){
                                this.$message.success(r.data.msg);
                            }else {
                                this.$message.error("操作失败");
                            }
                            this.getDictTypeData();
                            this.open=false;
                            this.title='';
                            this.form={};
                        })
                    }
                });
            },
            //取消
            cancel(){
                this.open=false;
            },
            // 数据表格的多选择框选择时触发
            handleSelectionChnage(selection){
                // alert(JSON.stringify(selection))
                //将选中的行转化为流 获取行内的id；
                this.ids =selection.map(item=>item.dictCode);
                //判断是否存在选中  没有禁用按钮
                this.multiple = !selection.length;
            },
            // 分页pageSize变化时触发
            handleSizeChange(val) {
                this.page.size = val;
                this.getDictTypeData();
            },
            // 点击上一页  下一页，跳转到哪一页面时触发
            handleCurrentChange(val) {
                this.page.current = val;
                this.getDictTypeData();
            },
            initDictTypeTable(){
                // 取路由路径上的参数
                const dictId = this.$route.params && this.$route.params.dictId // 路由传参
                // 根据字典类型ID查询字典的dictType
                this.$axios.get("system/api/dict/data/getDDByDictId/",{params:{dictId}}).then(r=>{
                    // 给查询条件的下拉框给默认值
                    this.search.dictType = r.data.t;
                    this.defaultDictType = r.data.t;
                    this.getDictTypeData()
                })
            },
            //查询 分页
            getDictTypeData(){
                this.$axios.post("system/api/dict/data/getTypeData/"+this.page.current+"/"+this.page.size,this.search).then(r=>{
                    this.dictDataTableList=r.data.t.records;
                    this.page.total=r.data.t.total;
                })
            },
            //加载系统状态
            initStatus(){
                this.$axios.get("system/api/dict/data/findByType/sys_normal_disable").then(r => {
                    this.statusOptions = r.data.t;
                })
            },
            //加载类型字典
            initDictType(){
                this.$axios.get("system/api/dict/typeData/getAllDict").then(r=>{
                    this.typeOptions=r.data.t;
                })
            },
            //解析状态格式
            statusFormatter(row){
                var val = row.status;
                return this.formatDict(this.statusOptions,val);
            },

        },
        created() {
            //加载系统状态
            this.initStatus();
            //加载类型字典
            this.initDictType();
            //初始化菜单
            this.initDictTypeTable()
        }
    }
</script>

<style scoped>

</style>
